// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import eltable from '@/views/eltable/eltable.vue'
import dialog from '@/views/dialog/dialog.vue'
import Login from '@/views/login/Login.vue'

const routes = [
  {
    path: '/',
    redirect: '/login' // 默认重定向到登录页
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/tableclick',
    name: 'tableclick',
    component: () => import('@/views/tableclick/tableclick.vue')
  },
  {
    path: '/table',  // 路由路径
    name: 'eltable', // 路由名称（可选）
    component: eltable // 对应的组件
  },
  {
    path: '/dialog',
    name: 'dialog',  
    component: dialog 
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('@/views/test/test.vue')
  },
  {
    path: '/tableprop',
    name: 'tableprop',
    component: () => import('@/views/eltable/components/tableprop.vue'),
    // 允许接收任意query参数（包括id）
    props: (route) => ({
      id: route.query.id || null // 处理空值情况
      , status: route.query.status || null
      , type: route.query.type || null
    })
  },
  {
    path: '/popover',
    name: 'popover',
    component: () => import('@/views/popover/popover.vue')
  },
  {
    path: '/directive',
    name: 'directive',
    component: () => import('@/views/directive/directive.vue')
  },
  {
    path: '/scroll',
    name: 'scroll',
    component: () => import('@/views/scroll/scroll.vue')
  },

]

const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 History 模式
  routes // 注入路由配置
})

export default router